/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from 'react';
import { connect } from 'dva';
import { List, Input, Spin } from 'antd';
import { firstUpperCase } from '@/utils/utils';
import { debounce } from "lodash";
import styles from './Lib.less';

const { Item: ListItem } = List;
const { Search: InputSearch } = Input;

@connect(({ loading, address }, { type }) => ({
  list: address[`${type}List`],
  pagetion: address[`${type === 'send' ? 'sender' : 'receiver'}Pagetion`],
  getting: loading.effects[`address/get${firstUpperCase(type)}List`],
}))
class Lib extends Component {
  static defaultProps = {
    onSelect: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
    this.pageSize = 100;
  }

  componentDidMount() {
    this.getList();
  }

  // 获取数据列表
  getList = (page = 1) => {
    const { dispatch, type } = this.props;
    const { value: keyword } = this.state;
    dispatch({
      type: `address/get${firstUpperCase(type)}List`,
      payload: {
        page,
        page_size: this.pageSize,
        keyword,
      },
    });
  };

  // 格式化数据
  formateItem = item => {
    const { type } = this.props;
    const prefix = type === 'send' ? 'sender' : 'receiver';
    const keys = ['mobile', 'tel', 'province', 'city', 'district', 'address','company'];
    const name = item[prefix];
    const [mobile, tel, province, city, district, address,company] = keys.map(
      key => item[`${prefix}_${key}`]
    );
    return {
      name,
      mobile: [mobile, tel].filter(item => !!item).join(' '),
      province,
      city,
      district,
      address,
      company
  };
  };

  // 点击选择
  onSelect = item => this.props.onSelect(this.formateItem(item));

  renderItem = item => {
    const { name, mobile, province, city, district, address,company } = this.formateItem(item);
    return (
      <ListItem className={styles.list_item} key={item.id} actions={[<a>选择</a>]} onClick={this.onSelect.bind(this, item)}>
        <span>
          {name}{`${company?'，'+company:''}`}，{mobile}，{province}
          {city}
          {district}
          {address}
        </span>
      </ListItem>
    );
  };

  onSearch = debounce((value) => {
    if (!value) return;
    this.getList(1, value)
  }, 500, {
    leading: true,
    trailing: false
  });

  onChange = e => {
    const { value } = e.target;
    this.setState(
      {
        value,
      },
      () => {
        if (!value) {
          this.getList();
        }
      }
    );
  };

  render() {
    const { value } = this.state;
    const { list, pagetion, getting } = this.props;
    const { page: current, page_size: pageSize, count: total } = pagetion || {};
    return (
      <>
        <Spin size="small" spinning={!!getting}>
          <InputSearch
            onChange={this.onChange}
            value={value}
            placeholder="电话号码或姓名"
            onSearch={this.onSearch}
            size="large"
          />
        </Spin>
        <List
          loading={getting}
          pagination={{
            onChange: this.getList,
            current,
            total,
            pageSize,
          }}
          dataSource={list}
          renderItem={this.renderItem}
          style={{ maxHeight: 400, overflowY: 'auto' }}
          className="kb-list kb-list-select"
        />
      </>
    );
  }
}

export default Lib;
